<template>
  <div class="page-form">
    <div class="action-bar">
      <el-button type="primary" @click="backTo">返回</el-button>
      <el-button class="" type="success" :disabled="!merchantInfo.sort" @click="updateSystem"
        v-loading="loading">修改配置</el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="pf-left">
          <div class="title">入驻信息</div>
          <el-form label-width="140px" ref="formRef">
            <div class="t2">公司基础数据</div>
            <el-form-item label="主体类型" prop="name">公司</el-form-item>
            <el-form-item label="营业执照" prop="name">
              <el-image class="imgs" :src="infos.businessLicenseFile[0].url"
                :preview-src-list="[infos.businessLicenseFile[0].url]" />
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="name">{{ infos?.unifiedSocialCredit }}</el-form-item>
            <el-form-item label="公司名称" prop="name">{{ infos?.companyName }}</el-form-item>
            <el-form-item label="营业执照住所" prop="name">{{ infos?.businessAddress }}</el-form-item>
            <el-form-item label="营业期限" prop="name">{{ infos?.licenseValidity }}</el-form-item>
            <div v-if="FrontImg">
              <div class="t2">法定代表人信息</div>
              <el-form-item label="法定代表人归属地" prop="name">中国大陆</el-form-item>
              <el-form-item label="身份证图片" prop="name">
                <div>
                  <el-image class="imgs" :src="FrontImg" :preview-src-list="[FrontImg]" />
                  <el-image class="imgs" :src="BackImg" :preview-src-list="[BackImg]" />
                </div>
              </el-form-item>
              <el-form-item label="法定代表姓名" prop="name">{{ infos?.legalRepresentative }}</el-form-item>
              <el-form-item label="法定身份证号码" prop="name">{{ infos?.idNumber }}</el-form-item>
              <el-form-item label="身份证有效期" prop="name">{{ infos?.idCardValidity }}</el-form-item>
            </div>
          </el-form>
        </div>

      </el-col>
      <el-col :span="12">
        <div class="pf-right">
          <div class="title">参数配置</div>
          <el-form label-width="140px" ref="formRef">
            <el-form-item label="主营品类" prop="name">{{ infos?.mainCategoryName }}</el-form-item>
            <el-form-item label="配置佣金比例" prop="name">{{ infos?.mallCommission }}</el-form-item>
            <el-form-item label="推送优先级" prop="name">
              <el-input-number v-model="merchantInfo.sort" :min="0" :max="100000" />
              <div style="color: red;margin-left: 20rpx;">注：数字越大，优先级越高，为0不推送</div>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import merchantApi from '@/api/mall/merchant'
const infos = ref()
const merchantInfo = ref({
  sort: undefined,
  companyId: undefined
})
const BackImg = ref()
const FrontImg = ref()
const loading = ref(false)
const emit = defineEmits(["backTo"]);

function backTo() {
  emit("backTo", false);
}

const props = defineProps({
  info: {
    type: Object,
    default: {}
  }
})

async function updateSystem() {
  try {
    loading.value = true
    await merchantApi.undataInfo(merchantInfo.value)
    loading.value = false
    emit("backTo", true);
  } catch (error) {
    loading.value = false
  }
}


watch(
  () => props.info,
  (newValue) => {
    infos.value = props.info
    infos.value.businessLicenseFile = JSON.parse(infos.value.businessLicenseFile)
    infos.value.idCardBackFile = JSON.parse(infos.value.idCardBackFile)
    infos.value.idCardFrontFile = JSON.parse(infos.value.idCardFrontFile)
    if (infos.value.idCardBackFile?.length > 0) {
      BackImg.value = infos.value.idCardBackFile[0].url
    }
    if (infos.value.idCardFrontFile?.length > 0) {
      FrontImg.value = infos.value.idCardFrontFile[0].url
    }
    merchantInfo.value.companyId = infos.value.id
    merchantInfo.value.sort = infos.value.sort
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.page-form {
  background-color: #fff;
  position: relative;
  flex: 1;
  margin-left: 10px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 20px 40px;

  .action-bar {
    position: relative;
    box-sizing: border-box;
    padding: 10px 0 15px 0;
    border-bottom: 1px solid var(--el-border-color-extra-light);
    display: flex;
    align-items: center;
    justify-content: flex-end;

    u .delete-btn {
      color: #f56c6c;
    }
  }

  .pf-left {
    height: calc(100vh - 200px);
    width: 100%;
    border-right: 2px solid #eee;
    overflow-y: scroll;
  }

  .title {
    font-size: 24px;
  }

  .t2 {
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    font-size: 18px;
  }

  .imgs {
    width: 200px;
    height: 140px;
    margin-right: 20px;
  }

  .pf-right {
    height: calc(100vh - 200px);
    width: 100%;
    position: relative;

    .pr-but {
      position: absolute;
      bottom: 100px;
      width: 200px;
      height: 60px;
      margin-left: 30%;
    }
  }
}
</style>
